﻿<template>
  <a-modal
    title="充值"
    width="60%"
    :visible="visible"
    :confirmLoading="loading"
    @ok="handleSubmit"
    @cancel="
      () => {
        this.visible = false
      }
    "
  >
    <a-spin :spinning="loading">
      <a-form-model ref="form" :model="entity" :rules="rules" v-bind="layout">
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="企业" prop="MID">
              <a-select
                allowClear
                @change="MerchantChange"
                show-search
                v-model="entity.MID"
                placeholder="请选择客户"
              >
                <a-select-option v-for="(item, index) in MerchantList" :key="index" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="任务" prop="TSKID">
              <a-input v-model="entity.TSKID" autocomplete="off" />
            </a-form-model-item>
          </a-col> -->
          <a-col :span="12">
            <a-form-model-item label="服务商" prop="ServiceProviderID">
              <a-select
                show-search
                v-model="entity.ServiceProviderID"
                @change="servicechange"
                allowClear
                placeholder="请选择服务商"
              >
                <a-select-option v-for="(item, index) in ServiceList" :key="index" :value="item.Id">
                  {{ item.ServiceName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="服务商开户行" prop="ServiceBankId">
              <a-select
                allowClear
                @change="ServiceBankChange"
                show-search
                v-model="entity.ServiceBankId"
                placeholder="请选择服务商开户行"
              >
                <a-select-option v-for="(item, index) in ServiceBank" :key="index" :value="item.Id">
                  {{ item.BankName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
           <a-col :span="12">
            <a-form-model-item label="账户" prop="ServiceAccountNo">
              <a-input disabled v-model="entity.ServiceAccountNo" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
         
          <a-col :span="12">
            <a-form-model-item label="代付通道" prop="PayChannelId">
              <a-select
                allowClear
                show-search
                v-model="entity.PayChannelId"
                placeholder="请选择通道"
              >
                <a-select-option v-for="(item, index) in BankCode" :key="index" :value="item.ChannelId">
                  {{ item.ChannelName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="服务费率" prop="RechargeRate">
              <a-input disabled v-model="entity.RechargeRate" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="实发金额" prop="AccountAmount">
              <a-input @blur="AccountAmountChange" v-model="entity.AccountAmount" autocomplete="off" />
            </a-form-model-item>
          </a-col>
         <a-col :span="12">
            <a-form-model-item label="充值金额" prop="RechargeAmount">
              <a-input disabled v-model="entity.RechargeAmount" />
            </a-form-model-item>
          </a-col>
          
        </a-row>
        <a-row>
          
          <a-col :span="12">
            <a-form-model-item label="服务费计算规则" prop="ruleType">
              <a-input disabled v-model="entity.ruleType" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="说明" v-bind="layout" prop="Note">
              
              <a-textarea  v-model="entity.Note" show-count />
            </a-form-model-item>
          </a-col>
          <!-- <a-col :span="12">
            <a-form-model-item label="付款账户" prop="PayingAccount">
              <a-input v-model="entity.PayingAccount" autocomplete="off" />
            </a-form-model-item>
          </a-col> -->
        </a-row>
        <!-- <a-row>
          <a-col :span="12">
            <a-form-model-item label="付款银行" prop="PayingBankName">
              <a-input v-model="entity.PayingBankName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="付款户名" prop="PayingAccountName">
              <a-input v-model="entity.PayingAccountName" autocomplete="off" />
            </a-form-model-item>
          </a-col>
        </a-row> -->
        <a-row>
          <a-col :span="12">
            <a-form-model-item label="银行回单" prop="customerReceiptUrl">
              <a-upload
                    name="avatar"
                    list-type="picture-card"
                    class="avatar-uploader"
                    style="width: 150px"
                    :show-upload-list="false"
                    :customRequest="selfUpload6"
                    :before-upload="beforeUpload"
                  >
                    <img style="width:102px;height:102px" v-if="entity.customerReceiptUrl" :src="entity.customerReceiptUrl" alt="银行回单" />
                    <div v-else>
                      <a-icon :type="loading ? 'loading' : 'plus'" />
                      <div class="ant-upload-text">银行回单</div>
                    </div>
                  </a-upload>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import { settings } from 'nprogress'
export default {
  props: {
    parentObj: Object,
  },
  data() {
    return {
      IdList:[],
      ServiceList: [],
      MerchantList:[],
      layout: {
        labelCol: { span: 5 },
        wrapperCol: { span: 18 },
      },
      visible: false,
      loading: false,
      entity: {},
      rules: {
        MID:[{ required: true, message: '请选择客户' }],
        ServiceProviderID:[{ required: true, message: '请选择服务商' }],
        ServiceBankId:[{ required: true, message: '请选择服务商开户行' }],
        PayChannelId:[{ required: true, message: '请选择代付通道' }],
        AccountAmount:[{ required: true, message: '请输入实发金额' }],
        // PayingAccount:[{ required: true, message: '请输入付款账户' }],
        // PayingBankName:[{ required: true, message: '请输入付款银行' }],
        // PayingAccountName:[{ required: true, message: '请输入付款户名' }],
      },
      title: '',
      queryParam: {},
      ServiceBank:[],
      BankCode:[]
    }
  },
  methods: {
    AccountAmountChange(value){
      let temp = parseFloat(value.target._value)
      let Ratemoney = parseFloat(temp * 0.16)
      let Total = parseFloat(temp + Ratemoney)
      this.$set(this.entity,"RechargeAmount",Total)
    },
    async GetMerchant() {
      await this.$http.post('/Base_Manage/Home/GetMerchant_Select').then((res) => {
        console.log(res)
        this.MerchantList = res.Data
      })
    },
    init() {
      this.IdList = []
      // this.GetService()
      this.GetMerchant()
      this.visible = true
      this.entity = {}
      this.$nextTick(() => {
        this.$refs['form'].clearValidate()
      })
      this.entity.ruleType = "B(实发金额 +(实发金额 * 费率))"
      this.entity.RechargeRate = "费率 16 %"
    },
    openForm(id, title) {
      this.init()

      if (id) {
        this.GetService();
        this.loading = true
        this.$http
          .post('/Base_leasesystem_accountrecharge/leasesystem_accountrecharge/GetTheData', { id: id })
          .then((resJson) => {
            this.loading = false

            this.entity = resJson.Data
            this.IdList.push(this.entity.MID)
            this.IdList.push(this.entity.ServiceProviderID)
            
            this.GetBankcode(this.IdList)
            this.GetServicesign(this.entity.MID);
          })
      }
    },
    handleSubmit() {
      this.$refs['form'].validate((valid) => {
        if (!valid) {
          return
        }
        this.entity.RechargeRate = 16
        this.loading = true
        this.$http
          .post('/Base_leasesystem_accountrecharge/leasesystem_accountrecharge/SaveData', this.entity)
          .then((resJson) => {
            this.loading = false

            if (resJson.Success) {
              this.$message.success('操作成功!')
              this.visible = false

              this.parentObj.getDataList()
            } else {
              this.$message.error(resJson.Msg)
            }
          })
      })
    },
    MerchantChange(value){
      let obj = {};
         obj = this.MerchantList.find((item)=>{ //这里的Data就是上面遍历的数据源
           return item.value == value; //筛选出匹配数据
         });
      this.entity.customerName = obj.text
      this.IdList.push(value)
      this.ServiceList = []
      this.ServiceBank = []
      this.GetServicesign(value)
    },
    GetServicesign(value){
      this.$http.post('/Base_leasesystem_servicesign/leasesystem_servicesign/GetService_BankByMID', { id: value }).then(resJson => {
           if(resJson.Success){
             console.log(resJson.Data.serviceinfo)
             this.ServiceList = resJson.Data.serviceinfo
            this.ServiceBank = resJson.Data.servicebank
            this.RechargeRate = resJson.Data.serviceRate

           }else{
             this.$message.error(resJson.Msg)
             return;
           }
        });
    },
    servicechange(value){
      let obj = {};
         obj = this.ServiceList.find((item)=>{ //这里的Data就是上面遍历的数据源
           return item.Id === value; //筛选出匹配数据
         });
      this.entity.ServiceProviderName = obj.ServiceName

      this.IdList.push(value)
      this.GetBankcode(this.IdList)
    },
    GetService() {
      this.$http.post('/Base_Manage/Home/GetService_Select').then((res) => {
        this.ServiceList = res.Data
      })
    },
    ServiceBankChange(value){
      let obj = {};
         obj = this.ServiceBank.find((item)=>{ //这里的Data就是上面遍历的数据源
           return item.Id === value; //筛选出匹配数据
         });
      this.entity.ServiceAccountNo = obj.AcctNo
    },
    selfUpload6({ action, file, onSuccess, onError, onProgress }) {
      this.loading = true
      const formData = new FormData()
      formData.append('file', file)
      this.$http.post('/Base_Manage/Upload/UploadFileByForm', formData).then((res) => {
        this.entity.customerReceiptUrl = res.url
        this.loading = false
      })
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('只能上传jpeg,png,jpg格式照片')
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('图片大小必须小于5M')
      }
      return isJpgOrPng && isLt2M
    },
    //获取代付通道
    async GetBankcode(ids){
      this.$http.post("/Base_leasesystem_merchantpaychannel/leasesystem_merchantpaychannel/GetDataByM_SID",ids)
      .then(res=>{
        this.BankCode = res.Data
      })
    }
  },
}
</script>
